<template>
  <div class="goods-tab">
    <div class="tab">
      <!-- 置顶的时候的容器 -->
      <div class="top-container">
        <!-- 当页面在顶部的时候采用的样式 -->
        <div class="top-position">
          <div class="item" :class="{active: tabindex == 0}" @click="getItemByTab(0)">商品详情</div>
          <!-- <div class="item" :class="{active: tabindex == 1}" @click="getItemByTab(1)">商品评价</div> -->
          <div class="item no-border" :class="{active: tabindex == 2}" @click="getItemByTab(2)">订购说明</div>
          <div class="clear"></div>
        </div>
      </div>
    </div>
    <div class="tab-container">
      <!-- 商品详情 -->
      <div class="detail" v-show="tabindex == 0">
        <div class="param">
          <div class="col-12">产品参数：</div>
          <div class="col-3">商品货号：{{goodsInfo.goodsSerial}}</div>
          <div class="col-3" v-for="(product, index) in goodsProperty" :key="index" v-show="(index + 2) <= 12 || isClicked">{{product.name}}：{{product.val || product.value}}</div>
          <!-- <div class="col-3" v-for="(feature, index) in (goodsInfo.featureObj || goodsInfo.goodsProperty)" v-show="goodsInfo.productParam.length + 2 + index < 12 || isClicked" :key="index">{{feature.name}}：{{feature.val || feature.value}}</div> -->
          <div class="arrow" :class="{down: isClicked, up: !isClicked}" @click="isClicked = !isClicked" v-if="goodsProperty.length > 11"></div>
          <div class="clearfix"></div>
        </div>
        <!-- 商品详情 -->
        <div class="goods-detail" v-html="goodsInfo.goods_details || goodsInfo.goodsDetails"></div>
        <div class="clear"></div>
      </div>
      <!-- 商品评价组件 -->
      <!-- <div class="evaluate" v-show="tabindex == 1">
        <evalute-list @size="setEvaluteCount" v-if="loadEvalute"></evalute-list>
      </div> -->
      <!-- 订购说明 -->
      <div class="instruction" v-show="tabindex == 2">
        <div class="col-3" v-if="supplyMode">供货方式：{{supplyMode}}</div>
        <div class="col-3" v-if="goodsInfo.machCycle">加工周期：{{goodsInfo.machCycle}}天</div>
        <div class="col-3" v-if="goodsInfo.shipTime">最快出货时间：{{goodsInfo.shipTime}}</div>
        <div class="col-3" v-if="saleMode">销售方式：{{saleMode}}</div>
        <!-- <div class="col-3">版型服务：{{goodsInfo.editService}}</div> -->
        <div class="col-3" v-if="sampleService">样品服务：{{sampleService}}</div>
        <div class="col-3" v-if="replaceType">包换服务：{{replaceType}}</div>
        <div class="col-3" v-if="returnGoods">退货服务：{{returnGoods}}</div>
        <div class="col-3" v-if="materal">材质保障：{{materal}}</div>
        <div class="col-3" v-if="matched">无货必配：{{matched}}</div>
        <div class="clear"></div>
      </div>
    </div>
  </div>
</template>

<script>
// 导入公共方法
import { windowScroll } from '../../../common/util.js'

// 商品评价组件
import evaluteList from '../components/EvaluteList'

// 导入成交记录组件
import record from '../components/Record'

export default {
  computed: {
    goodsProperty() {
      let list = []
      let usefulList = []
      if ((this.goodsInfo.productParamList && this.goodsInfo.productParamList.length > 0) || (this.goodsInfo.productParam && this.goodsInfo.productParam.length > 0)) {
        list = this.goodsInfo.productParamList || this.goodsInfo.productParam
      }
      list.concat(this.goodsInfo.featureObj || this.goodsInfo.goodsProperty).forEach(item => {
        if (item.value || item.val) {
          usefulList.push(item)
        }
      })
      return usefulList
    },
    supplyMode() {
      // 现货
      if (this.goodsInfo.supplyMode == 1) {
        return '现货'
      }
      // 现货
      if (this.goodsInfo.supplyMode == 2) {
        return '订货'
      }
      // 现货
      if (this.goodsInfo.supplyMode == 3) {
        return '现货且支持订货'
      }
      return ''
    },
    saleMode() {
      if (this.goodsInfo.saleMode == 1) {
        return '普通售卖'
      }
      if (this.goodsInfo.saleMode == 2) {
        return '批量售卖'
      }
      return ''
    },
    sampleService() {
      if (this.goodsInfo.sampleService == 1) {
        return '支持拿样'
      }
      if (this.goodsInfo.sampleService == 2) {
        return '不支持拿样'
      }
      return ''
    },
    replaceType() {
      if (this.goodsInfo.replaceType == 1) {
        return '7天包换'
      }
      return ''
    },
    returnGoods() {
      if (this.goodsInfo.returnGoods == 1) {
        return '7天无理由包退'
      }
      if (this.goodsInfo.returnGoods == 2) {
        return '15天无理由包退'
      }
      if (this.goodsInfo.returnGoods == 3) {
        return '30天无理由包退'
      }
      return ''
    },
    materal() {
      if (this.goodsInfo.materal == 1) {
        return '是'
      }
      if (this.goodsInfo.materal == 2) {
        return '否'
      }
    },
    matched() {
      if (this.goodsInfo.matched == 1) {
        return '是'
      }
      if (this.goodsInfo.matched == 2) {
        return '否'
      }
    }
  },
  components: {
    evaluteList,
    record
  },
  props: {
    goodsInfo: {
      type: Object,
      default: () => { return {} }
    }
  },
  data() {
    return {
      isClicked: false,
      // tab组件的高度
      tabTop: 0,

      // 当前展示第几个tab
      tabindex: 0,

      // tab页头
      tabObj: '',

      // 设置评论数量
      count: 0,

      // tab页面
      container: '',

      // 是否加载评价（防止页面初始化的时候就加载数据）
      loadEvalute: false,

      // 是否加载成交记录（防止页面初始化的时候就加载数据）
      loadRecord: false
    }
  },
  mounted() {
    // tab组件
    let tabObj = this.tabObj = $('.goods-tab .tab')

    // tab页的主体内容
    let container = this.container = $('.goods-tab .tab-container')

    // 刷新后默认置顶
    let tabTop = tabObj.offset().top

    // 初始化页面滚动方法
    windowScroll.init()

    // 设置回调方法
    windowScroll.setCallBack(() => {
      // 如果菜单滚动到看不见了，则置顶显示
      if ($(window).scrollTop() >= tabTop - 1) {
        // tab头部置顶显示
        tabObj.addClass('top')

        // 下方容器空出60px的距离
        container.addClass('mt50')
      }

      // 如果页面滚动下来了，则tab选项不置顶显示
      if (container.offset().top >= ($(window).scrollTop() + 50)) {
        // tab头部取消置顶
        tabObj.removeClass('top')

        // 清除下方容器空出的60px的距离
        container.removeClass('mt50')
      }
    })
  },
  methods: {
    /**
     * 点击tab页，展示对应的tab页下的内容
     *
     * @param  {Object} index tab页的页码
     */
    getItemByTab(index) {
      this.tabindex = index

      // 如果点击的是商品的成交记录
      if (index == 2) {
        this.loadRecord = true
      }

      // 如果点击的是商品的评价
      if (index == 1) {
        this.loadEvalute = true
      }

      // 当前偏移的高度
      let offsetTop = this.container.offset().top

      // 如果当前是置顶状态
      if (offsetTop < ($(window).scrollTop() + 50)) {
        // 让tab详细页居中显示
        $('body').animate({scrollTop: offsetTop - 49}, 200)

        // tab头部置顶显示
        this.tabObj.addClass('top')

        // 下方容器空出60px的距离
        this.container.addClass('mt50')
      }
    },

    /**
     * 设置评论的数量
     *
     * @parmas { Number } count 设置评论数量
     */
    setEvaluteCount(count) {
      this.count = count
    }
  }
}
</script>

<style lang="scss" scoped>
@import url('../../../scss/_iconfont.scss');

.mt60 {
  margin-top: 60px;
}
.mt50 {
  margin-top: 50px;
}
.col-12 {
  color: #8f8f8f;
  width: 100%;
  line-height: 24px;
}
.col-3 {
  float: left;
  min-width: 25%;
  line-height: 24px;
  padding-right: 16px;
}
.goods-tab {
  background-color: #FFFFFF;
  width: 100%;

  .tab {
    letter-spacing: -5px;
    background-color: #F6F6F6;
    border-top: 1px solid #DDDDDD;
    border-left: 1px solid #DDDDDD;
    border-right: 1px solid #DDDDDD;
    
    &.top {
      box-shadow: rgba(0,0,0,.2) 0 1px 5px 0;
      background-color: #FFFFFF;
      position: fixed;
      top: 0px;
      width: 100%;
      left: 0px;
      z-index: 10;

      .top-container {
        width: 1230px;
        margin: 0 auto;

        .top-position {
          float: right;
          width: calc(100% - 220px);
          padding: 0px;
        }
      }

      .item:first-child {
        border-left: 1px solid #DDDDDD;
      }

      .item {
        border-bottom: 0px;
      }

      .add-to-cart {
        background-color: #F048A4;
        display: inline-block;
        width: calc(100% - 480px);
      }

      .other-item {
        display: none;
      }
    }

    .item {
      cursor: pointer;
      color: #404040;
      display: block;
      font-size: 14px;
      float: left;
      width: 90px;
      height: 50px;
      line-height: 50px;
      letter-spacing: 0px;
      text-align: center;
      position: relative;

      .num {
        color: #F00384;
        font-size: 16px;
        margin-left: 2px;
        margin-right: 2px;
      }

      &::before {
        background-color: #e6e6e6;
        content: "";
        display: block;
        height: 20px;
        width: 2px;
        position: absolute;
        top: 14px;
        right: 0px;
      }

      &.no-border {
        &:before {
          display: none;
        }
      }

      &.active {
        color: #F00384;

        &:after {
          background-color: #F00384;
          content: "";
          display: block;
          height: 3px;
          width: 100%;
          position: absolute;
          top: 0px;
          left: 0px;
        }
      }    
    }

    .other-item {
      background-color: #F6F6F6;
      border-right: 0px;
      width: calc(100% - 424px);
    }

    .add-to-cart {
      display: none;
    }

    &:after {
      content: "";
      clear: both;
    }
  }
  .tab-container {
    .detail {
      .param {
        border-bottom: 1px solid #DDDDDD;
        border-left: 1px solid #DDDDDD;
        border-right: 1px solid #DDDDDD;
        padding: 24px 40px;
        position: relative;

        .arrow {
          background-color: white;
          background-image: url('../../../assets/ico_arrow_down.png');
          background-repeat: no-repeat;
          background-position: center;
          border: 1px solid #c5c5c5;
          bottom: -14px;
          cursor: pointer;
          display: block;
          position: absolute;
          width: 46px;
          height: 14px;
          right: 86px;

          &.down {
            border-bottom: 0px;
            transform: rotate(180deg);
          }
          &.up {
            border-top: 0px;
          }
        }
        
      }
      .name {
        color: #666666;
        display: inline-block;
        padding: 8px 0px;
        padding-left: 15px;
        width: 122px;
      }
      .value {
        color: #404040;
        display: inline-block;
        padding: 8px 0px;
        padding-left: 15px;
      }
      .goods-detail {
        padding: 30px 110px;
        img {
          margin-bottom: 10px;
        }
      }
    }
    .evaluate {
      border-left: 1px solid #DDD;
      border-right: 1px solid #DDD;
      border-bottom: 1px solid #DDD;
      padding: 40px 50px;
    }
    .instruction {
      border-left: 1px solid #DDD;
      border-right: 1px solid #DDD;
      border-bottom: 1px solid #DDD;
      padding: 24px 40px;
    }
  }
  .clear {
    height: 0px;
    clear: both;
  }
 }
</style>